<template>
  <div id="bacCultureMedium">
    <Breadcrumb content="接口设置" />
    <div class="bodyContent">
      <!-- vxe-toolbar -->
      <Splitpanes class="area">
        <Pane size="60">
          <vxe-toolbar perfect>
            <template #buttons>
              <vxe-input v-model="form.keyvalue" type="search" clearable class="vxeInputSearch" placeholder="关键字查询" @keydown="keyEnter" @search-click="findList" @clear="findList"></vxe-input>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-refresh" content="刷新" :loading="showLoading" @click="findList"></vxe-button>
              <vxe-button type="text" class="button-blue" icon="vxe-icon-add" content="新增" @click="addBacCultureMedium"></vxe-button>
              <vxe-button type="text" class="button-red" icon="vxe-icon-delete" content="删除" @click="deleteBacCultureMedium"></vxe-button>
            </template>
          </vxe-toolbar>
          <div class="tableBox">
            <vxe-table ref="tableRef" border="inner" align="left" class="mytable-scrollbar" :loading="showLoading" height="auto" :data="tableData" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true, enabled: false }" @cell-click="tableCellClick" @menu-click="contextMenuClickEvent" show-overflow keep-source>
              <vxe-column type="checkbox" width="26"></vxe-column>
              <vxe-column type="seq" title="#" width="30"></vxe-column>
              <vxe-column field="code" title="接口编码" width="120"></vxe-column>
              <vxe-column field="name" title="接口名称" width="120"></vxe-column>
              <vxe-column field="condition" title="医院编号" width="120"></vxe-column>
              <vxe-column field="cycle" title="是否启用" width="120"></vxe-column>
              <vxe-column field="obInterval" title="调试状态" width="120"></vxe-column>
              <vxe-column field="bloodFlag" title="后台独立线程" width="90">
                <template #default="{ row }">
                  <el-tag :type="getIsStaticTagType(row.bloodFlag)">{{ getIsStaticStatusDesc(row.bloodFlag) }}</el-tag>
                </template>
              </vxe-column>
              <vxe-column field="remark" title="序号" width="80" align="center"></vxe-column>
              <vxe-column field="inputCode" title="录入码" width="110" :edit-render="{ autofocus: '.vxe-input--inner' }"></vxe-column>
              <vxe-column field="orderNum" title="接口类型" width="70"></vxe-column>
              <vxe-column field="isPrintLabel" title="不打印标签" width="70" :edit-render="{ autofocus: '.vxe-input--inner' }">
                <template #default="{ row }">
                  <el-tag :type="getIsStaticTagType(row.isPrintLabel)">{{ getIsStaticStatusDesc(row.isPrintLabel) }}</el-tag>
                </template>
              </vxe-column>
              <vxe-column field="autoWindowScan" title="数据库类型" width="120">
                <template #default="{ row }">
                  <el-tag :type="getIsStaticTagType(row.autoWindowScan)">{{ getIsStaticStatusDesc(row.autoWindowScan) }}</el-tag>
                </template>
              </vxe-column>
              <vxe-column field="remark" title="服务器名称/IP" width="120" align="center"></vxe-column>
              <vxe-column field="remark" title="数据库名称" width="120" align="center"></vxe-column>
              <vxe-column field="remark" title="其他链接参数" width="120" align="center"></vxe-column>
              <vxe-column field="remark" title="自定义对象名" width="120" align="center"></vxe-column>
              <vxe-column field="remark" title="登录账号" width="120" align="center"></vxe-column>
            </vxe-table>
          </div>
        </Pane>

        <Pane size="40">
          <el-tabs type="border-card">
            <el-tab-pane label="基本信息">
              <InterfaceSettingForm ref="BacCultureMediumFormRef" :currentRow="currentRow" @findList="findList" />
            </el-tab-pane>
            <el-tab-pane label="接口方法明细">
              <el-button type="primary" @click="addInParam">添加</el-button>
              <vxe-table ref="tableRef" border="inner" align="left" class="mytable-scrollbar" height="400" :data="form.inParamList" :row-config="{ isCurrent: true, isHover: true }" :column-config="{ resizable: true }" :edit-config="{ trigger: 'click', mode: 'cell', showStatus: true }" @cell-click="tableCellClick" show-overflow keep-source>
                <vxe-column type="seq" title="#" width="30"></vxe-column>
                <vxe-column field="inColoum" title="接口方法" width="150" :edit-render="{ autofocus: '.vxe-input--inner' }">
                  <template #edit="{ row, rowIndex, column }">
                    <vxe-input v-model="row.inColoum" type="text" @keydown.enter="enterEvent(row, rowIndex, column)"></vxe-input>
                  </template>
                </vxe-column>
                <vxe-column field="coloumExplain" title="启用" width="100" :edit-render="{ autofocus: '.vxe-input--inner' }">
                  <template #edit="{ row, rowIndex, column }">
                    <vxe-input v-model="row.coloumExplain" type="text" @keydown.enter="enterEvent(row, rowIndex, column)"></vxe-input>
                  </template>
                </vxe-column>
                <vxe-column field="coloumExplain" title="执行方式" width="100" :edit-render="{ autofocus: '.vxe-input--inner' }">
                  <template #edit="{ row, rowIndex, column }">
                    <vxe-input v-model="row.coloumExplain" type="text" @keydown.enter="enterEvent(row, rowIndex, column)"></vxe-input>
                  </template>
                </vxe-column>
                <vxe-column field="coloumExplain" title="多步sql" width="100" :edit-render="{ autofocus: '.vxe-input--inner' }">
                  <template #edit="{ row, rowIndex, column }">
                    <vxe-input v-model="row.coloumExplain" type="text" @keydown.enter="enterEvent(row, rowIndex, column)"></vxe-input>
                  </template>
                </vxe-column>
                <vxe-column field="coloumExplain" title="方法配置" width="150" :edit-render="{ autofocus: '.vxe-input--inner' }">
                  <template #edit="{ row, rowIndex, column }">
                    <vxe-input v-model="row.coloumExplain" type="text" @keydown.enter="enterEvent(row, rowIndex, column)"></vxe-input>
                  </template>
                </vxe-column>
                <vxe-column field="coloumExplain" title="备注" width="100" :edit-render="{ autofocus: '.vxe-input--inner' }">
                  <template #edit="{ row, rowIndex, column }">
                    <vxe-input v-model="row.coloumExplain" type="text" @keydown.enter="enterEvent(row, rowIndex, column)"></vxe-input>
                  </template>
                </vxe-column>
              </vxe-table>
            </el-tab-pane>
            <!-- <ExtraPropertyPanel :busRow="curSlectRow" /> -->
          </el-tabs>
        </Pane>
      </Splitpanes>
    </div>
  </div>
</template>

<script lang="ts" setup>
// 引入组件区 ==========src\views\lab_sys\bac_set\bacCultureMedium.vue
import Breadcrumb from '@/components/Breadcrumb.vue';
import { reactive, ref, getCurrentInstance, onMounted } from 'vue';
import { Splitpanes, Pane } from 'splitpanes';
import { VXETable } from 'vxe-table';
import { VxeMessage, VxeNotifyType } from '@/utils/CommonMessage'; //提示框
import type { VxeTableInstance, VxeTablePropTypes, VxeTableEvents } from 'vxe-table';
import XEClipboard from 'xe-clipboard';
import InterfaceSettingForm from './InterfaceSettingForm.vue'; //基本信息表单组件
import ExtraPropertyPanel from '@/components/ExtraPropertyPanel.vue';

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();

// 左侧表格:
let showLoading = ref(false); //刷新+表格加载
const form = reactive({ keyvalue: '', inParamList: [] }); //根据关键字查询
const tableRef = ref<VxeTableInstance<RowVO>>(); //表格ref标记
const tableData = reactive([]); //表格数据
const curSlectRow = ref({});
// 右侧表单:
const BacCultureMediumFormRef = ref<InstanceType<typeof BacCultureMediumFormRef>>(); //基本信息表单标记ref
let currentRow: any = reactive({ id: '', code: '' }); //基本信息表单当前行数据
const EditExtraPropertiesRef = ref(null); //配置扩展属性弹框ref

// 方法定义区 =============
onMounted(() => {
  findList(); // 获取培养基数据
});

function getIsStaticStatusDesc(row) {
  if (row) {
    return '是';
  } else {
    return '否';
  }
}

function getIsStaticTagType(row: any) {
  if (row) {
    return 'success';
  } else {
    return 'danger';
  }
}

function keyEnter(e: any) {
  if (e.$event.code == 'Enter') {
    findList();
  }
}

// 获取培养基
const findList = () => {
  showLoading.value = true;
  tableData.length = 0; //放入数据前清空数据
  const url = '/api/bac/bac-culture-medium/findBacCultureMediumList';
  proxy.$http
    //注意此处的数据条数
    .get(url, { params: { searchValue: form.keyvalue } })
    .then(async (res: any) => {
      tableData.push(...res.data);
      showLoading.value = false;
      if (res && res.data && res.data.length > 0) {
        currentRow.id = '';
        tableCellClick({ row: res.data[0] });
        const $table = tableRef.value;
        if ($table) {
          await $table.setCurrentRow(res.data[0]);
        }
      }
    })
    .catch((err: any) => {
      showLoading.value = false;
      VxeMessage('获取培养基数据异常', VxeNotifyType.error);
    });
};

// 新增培养基
function addBacCultureMedium() {
  const $formRef = BacCultureMediumFormRef.value;
  BacCultureMediumFormRef.value.addNew();
}

// 删除培养基
function deleteBacCultureMedium() {
  const arr = tableRef.value?.getCheckboxRecords(true);
  if (!(arr && arr.length > 0 && arr[0])) {
    VxeMessage('请勾选要删除的数据', VxeNotifyType.info);
  } else {
    proxy
      .$confirm('确定要删除当前勾选的数据？', '提示', {
        cancelButtonClass: 'cancel-button',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
      .then(() => {
        const data = { bacCultureMedia: arr };
        const url = '/api/bac/bac-culture-medium/deleteBacCultureMedium';
        proxy.$http
          .post(url, data)
          .then((res: any) => {
            VxeMessage(res.status.msg, VxeNotifyType.success);
            findList();
            BacCultureMediumFormRef.value?.clearFormData();
          })
          .catch((err: any) => {
            VxeMessage(err, VxeNotifyType.error);
          });
      })
      .catch((err: any) => {
        VxeMessage(err, VxeNotifyType.error);
      });
  }
}

// 表格选中当前行
function tableCellClick({ row }: any) {
  curSlectRow.value = row;
  Object.assign(currentRow, row);
  proxy.$forceUpdate();
}
function addInParam() {
  const data = {
    inColoum: '',
    coloumExplain: ''
  };
  form.inParamList.push(data);
}
</script>
<style lang="scss" scoped>
#bacCultureMedium {
  width: 100%;
  height: 100%;

  .bodyContent {
    // 面包屑40px  上下间距10px
    height: calc(100% - 60px);

    .area {
      background-color: $base-white;

      // 附加按钮间距
      .button-blue,
      .button-red {
        margin: 5px 0 5px 5px;
      }

      .tableBox {
        height: calc(100% - 40px);
      }

      .el-tabs--border-card {
        border: none;
        height: 100%;

        :deep(.el-tabs__content) {
          height: calc(100% - 39px - 30px);

          .el-tab-pane {
            height: 100%;
          }
        }
      }
    }
  }
}
</style>
